<html>

<head>
    <meta charset="utf-8">
    <title>收支明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <!--App自定义的css-->
    <style type="text/css">
        p img {
            max-width: 100%;
            height: auto;
        }

        .mui-content {
            background: #fff;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .mui-bar-nav.mui-bar .mui-pull-right span {
            color: #8f8f94;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #000;
            border-bottom: 2px solid #ffdb28;
        }

        .mui-table-view-cell:after {
            height: 0;
        }

        .mui-table-view-cell .mui-row div {
            color: #8f8f94;
            font-size: 13px;
        }

        .mui-table-view .mui-media-object.mui-pull-left {
            font-size: 40px;
            color: #ffdb28;
        }

        .mui-content{
            background: #EFEFF4;
        }

        #sliderSegmentedControl a{
            background: white;
        }
        .top-shadow{
            height: 0;
        }

    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="backahter mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">收支明细</h1>
    <!--<a class="'mui-btn mui-btn-link mui-pull-right" href="wirecord.html"><span>提现记录</span></a>-->
</header>
<div class="mui-content">
    <!-- https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/wallet-bang.jpg -->
    <div class="mui-card card-wet-cent">
        <div class="mui-table">
            <!--<div class="mui-col-xs-8 mui-col-sm-8 mui-inline">
                <p>累计收入</p>
                <h4 id="all-income">---</h4>
            </div>-->
            <!--<div class="mui-col-xs-4 mui-col-sm-4 mui-inline">
                   <button type="button" class="mui-btn mui-btn-danger">阅读宝兑换</button>
               </div>-->
        </div>
        <div class="mui-table">
            <div class="mui-col-xs-6 mui-col-sm-6 mui-inline">
                <p>佣金</p>
                <strong>
                    <h4 id="commission">--</h4>
                </strong>
            </div>
            <div class="mui-col-xs-6 mui-col-sm-6 mui-inline">
                <p>阅读宝余额</p>
                <strong>
                    <h4 id="balance">--</h4>
                </strong>
            </div>
            <!--<div class="mui-col-xs-3 mui-col-sm-3 mui-inline">
                <p>本月直推人数</p>
                <strong>
                    <h4 id="withdrawalLimit">&#45;&#45;</h4>
                </strong>
            </div>-->
            <!--<div class="mui-col-xs-12 mui-col-sm-12 mui-inline">
                <button class=""></button>
            </div>-->
        </div>
    </div>
    <div class="mui-table tagging-information">
        <div class="mui-col-xs-8 mui-col-sm-8 mui-inline">
            <!--<p>1阅读宝等于1元</p>-->
        </div>
        <div class="mui-col-xs-4 mui-col-sm-4 mui-inline">
            <!--	<a href="exchange-rules.html">
                        <p><i class="mui-icon mui-icon-help"></i>兑换规则</p>
                    </a>-->
        </div>
    </div>
    <!-- 假装是布局 -->
    <div class="top-shadow"></div>

    <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

        <a class="mui-control-item  mui-active" href="#item1">
            分销明细
        </a>
        <a class="mui-control-item" href="#item2">
            商城分销明细
        </a>
    </div>
    <div class="mui-slider-group">
        <div id="item1" class="mui-control-content mui-active">
            <div class="text">
                <ul class="mui-table-view" id="index1">

                </ul>
            </div>
            <!--<div class="mui-scroll-wrapper" style="position: relative" >
                <div class="mui-scroll" style="position: relative" data-orderStatus="1">
                    <ul class="mui-table-view" id="index1">

                    </ul>
                </div>
            </div>-->
        </div>
        <div id="item2" class="mui-control-content">
            <div class="text">
                <ul class="mui-table-view" id="index2">

                </ul>
            </div>
            <!--<div class="mui-scroll-wrapper" style="position: relative">-->
            <!--<div class="mui-scroll" style="position: relative" data-orderStatus="1">-->

            <!--</div>-->
            <!--</div>-->
        </div>
    </div>

</div>
<div class="cash-withdrawal-box">
    <a href="upwallet.html">
        <button type="button" class="mui-btn mui-btn-warning cash-withdrawal-btn">提现</button>
    </a>
</div>
</body>
<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script src="../default/js/mui.pullToRefresh.js"></script>
<script src="../default/js/mui.pullToRefresh.material.js"></script>

<!--<script src="../default/js/vconsole.js"></script>-->
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    // ajax地址

    mui.showLoading("正在加载..", "div");

    $(function () {
        findByUserBalance();
        // queryQuota();
    });
    /*var lastPage = 3; //总共页数
    var currPage = 1; //当前页码
    var counter = 1; //计数器*/
    // 页码+50
    var startingNumber = 0;
    var startingNumber1 = 0;
    var index1 = 0;
    var index2 = 0;
    var frequency = 0;
    (function ($) {
        $.ready(function () {
            $.each(document.querySelectorAll('.mui-control-content .text'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    up: {
                        auto: true,
                        callback: function () {
                            var self = this;
                            if(index==0){
                                distribution(self);
                            }else{
                                read(self);
                            }
                        }
                    }
                });
            });

        });
    })(mui);

    function queryUserTotalIncome() {
        $.ajax({
            url: website + '/UserController/queryUserTotalIncome',
            type: 'post',
            data: {userId: userId},
            success: function (data) {
                $("#all-income").html(data.data);
            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                }, 1000)
            }
        });
    }

    function distribution(self) {
        var ul = self.element.querySelector('.mui-table-view');
        var length = ul.querySelectorAll('li').length;

        var pageNumber1=0;

        if (length == 0) {
            pageNumber1=0;
        } else if (length % 50 == 0) {
            pageNumber1 = length/50;
        }
        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/DistributionDetailsController/findByUserAll',
            type: 'post',
            data: {
                userId: userId,
                startingNumber: pageNumber1
            },
            success: function (data) {
                var html = '';
                data.data.forEach(function (value) {
                    html += '<li class="mui-table-view-cell">\n' +
                        '<a href="javascript:;">\n';
                    if (value.severalLevelsOfDistribution == "一级分销") {
                        html += '<div class="mui-icon icon iconfont icon-yonghu1 mui-media-object mui-pull-left"></div>'
                    } else if (value.severalLevelsOfDistribution == "二级分销") {
                        html += '<div class="mui-icon icon iconfont icon-yonghu mui-media-object mui-pull-left"></div>'
                    } else {
                        html += '<div class="mui-icon icon iconfont icon-yonghu2 mui-media-object mui-pull-left"></div>'
                    }
                    html += '                                    <div class="mui-media-body">\n' +
                        value.severalLevelsOfDistribution +
                        '                                        <div class="mui-row">\n' +
                        '                                            <div class="mui-col-sm-6 mui-col-xs-6">\n' +
                        '                                              余额加' + value.rewardQuantity + '' +
                        '                                            </div>\n' +
                        '                                            <div class="mui-col-sm-6 mui-col-xs-6">\n' +
                        value.rewardTime +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </a>\n' +
                        '</li>'
                });

                mui.hideLoading();
                if (data.data.length == 0) {
                    self.endPullUpToRefresh(true);
                } else if (data.data.length < 50) {
                    $("#index1").append(html);
                    self.endPullUpToRefresh(true);
                } else {
                    $("#index1").append(html);
                    self.endPullUpToRefresh(false);
                }
            },
            error: function () {
                mui.showLoading("未知错误..", "div");
            }
        });
    }

    function read(self) {
        mui.showLoading("正在加载..", "div");
        var ul = self.element.querySelector('.mui-table-view');
        var length = ul.querySelectorAll('li').length;

        var pageNumber2=0;

        if (length == 0) {
            pageNumber2=0;
        } else if (length %30 == 0) {
            pageNumber2 = length/30;
        }
        $.ajax({
            url: website + '/DetailedFinancialReturnsController/findByUser',
            type: 'post',
            data: {
                userId: userId,
                pageNumber: pageNumber2,
                pageSize:30
            },
            success: function (data) {
                var html = '';
                data.data.forEach(function (value) {
                    html += '<li class="mui-table-view-cell">\n' +
                        '<a href="javascript:;">\n';
                    // if (value.earningWay == "阅读文章奖励") {
                    //     html += '<div class="mui-icon icon iconfont icon-xinwen1 mui-media-object mui-pull-left"></div>'
                    // } else {
                    //     html += '<div class="mui-icon icon iconfont icon-chakantiezishipin mui-media-object mui-pull-left"></div>'
                    // }
                    html += '                                    <div class="mui-media-body">';
                    /*if(value.reward_method==1){
                        html+='<p>余额发放</p>';
                    }else{
                        html+='<p>阅读宝发放</p>';
                    }*/
                    html +=
                        '                                        <div class="mui-row">\n' +
                        '                                            <div class="mui-col-sm-6 mui-col-xs-6">\n' +
                        '                                              佣金+' + value.financial_income_amount +
                        '                                            </div>\n' +
                        '                                            <div class="mui-col-sm-6 mui-col-xs-6">\n' +
                        '时间:'+value.acquisition_time+
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </a>\n' +
                        '</li>'
                });
                mui.hideLoading();
                if (data.data.length == 0) {
                    self.endPullUpToRefresh(true);
                } else if (data.data.length < 30) {
                    $("#index2").append(html);
                    self.endPullUpToRefresh(true);
                } else {
                    self.endPullUpToRefresh(false);
                    $("#index2").append(html);
                }
            },
            error: function () {
                mui.showLoading("未知错误..", "div");
            }

        });
    }

    // 查询用户的分销佣金和阅读宝,和朋友
    function findByUserBalance() {
        // 查询用户的阅读宝和余额
        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/UserController/findByUserBalance',
            type: 'post',
            data: {userId: userId},
            success: function (data) {
                $("#balance").html(data.data.balance);
                $("#commission").html(data.data.commission);
                mui.hideLoading();
            },
            error: function () {
                mui.showLoading("未知错误..", "div");
            }
        });

    };

    // 查询用户阅读宝提现额度
    function queryQuota() {
        // 查询用户本月直推人数
        $.ajax({
            url: website + '/UserController/queryDirectPush',
            type: 'post',
            data: {userId: userId},
            success: function (data) {
                $("#withdrawalLimit").html(data.data);
            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                mui.openWindow({
                    url: "http://newst.whilte.com/index.html",
                });
            }
        });

    };

    mui('header').on('tap', '.backahter', function (e) {
        mui.openWindow({
            url: 'task.html'
        });
    });

    window.onload = function () {
        mui.hideLoading();
    }
</script>
<script type="text/javascript">
    // 吸顶状态
    var obj = document.getElementById("sliderSegmentedControl");
    var ot = obj.offsetTop;
    document.onscroll = function () {
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")
    }
</script>

</html>
